<template>
  <view class="page">
	  <!-- header开始 -->
		<view class="header">
			<!-- Location开始 -->
			<view class="locationName">
				<uni-icons type="location-filled" size="20" color="#ff0000"></uni-icons>
				<text>石家庄</text>
			</view>
			  <!-- Location结束 -->
			<!-- 搜索框开始 -->
			<view class="uni-search-bar">
				<uni-search-bar ref="searchBar" radius="100" cancelButton="none" disabled placeholder="搜索医生,科室"/>
			</view>
			<!-- 搜索框结束 -->
		</view>
		<!-- header结束 -->
		<!-- 首页分类显示开始 -->
		<view class="classify_wrap">
			<!-- 横向分类滚动开始 -->
			<view class="classify_scroll_x">
				<scroll-view scroll-x="true" >
					<view class="segmented-wrap">
						<uni-segmented-control :current="current" :values="classify" @clickItem="onClickItem" styleType="text" activeColor="#CC0000"></uni-segmented-control>
					</view>
				</scroll-view>
			</view>
			<!-- 横向分类滚动结束 -->
			<!-- 分类icon开始 -->
			<view class="classify_icon">
				<uni-icons type="list" size="30" color="#999999" @click="goToGridPage()"></uni-icons>
			</view>
			<!-- 分类icon结束 -->
		 </view>
		<!-- 首页分类显示结束 -->
		<!-- 主要内容开始 -->
			<view class="content">
				<view v-show="current === 0">
					<!-- 轮播图开始 -->
						<view class="uni-margin-wrap">
							<unicloud-db v-slot:default="{data, loading, error, options}" collection="opendb-banner">
								<view v-if="error">{{error.message}}</view>
								<view v-else>
									<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
									  <swiper-item v-for="(item, index) in data" :key="item._id">
										<view class="swiper-item">
										  <image class="banner-image" :src="item.bannerfile.url" mode="aspectFill" :draggable="false" />
										</view>
									  </swiper-item>
									</swiper>
								</view>
							</unicloud-db>
						</view>
					<!-- 轮播图结束 -->
					<!-- 患者服务中心开始 -->
					<view class="vip-wrap">
						<uni-card title="患者服务中心" :thumbnail="patientIcon" margin="5px">
							<uni-grid :column="column" :show-border="false" :square="false">
								<uni-grid-item v-for="(item, index) in patientItem">
									<view class="grid-item-box">
										<image :src="item.icon" style="width: 60rpx; height: 60rpx;" mode="aspectFill"></image>
										<text>{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</uni-card>
					</view>
					<!-- 患者服务中心结束 -->
					<!-- 科室列表开始 -->
					<view class="workList">
						<unicloud-db v-slot:default="{data, loading, error, options}" collection="doctor">
							<view v-if="error">{{error.message}}</view>
							<view v-else>
								<uni-list>
									<uni-list-item v-for="(item, index) in data">
										<template v-slot:header>
											<view class="slot-box">
												<image class="slot-image" :src="item.doctorPhoto.url" mode="widthFix"></image>
											</view>
										</template>
										<template v-slot:body>
										    <view class="uni-doctorLevel">
										      <text>职称 | {{item.doctorLevel}}</text>
										    </view>
										    <view class="doctorNam">
										      <text>姓名 | {{ item.doctorName }}</text>
										      <text>主治 | {{ item.goodat}}</text>
										    </view>
										    <view class="department">
										      <text class="department">所属科室 {{item.department}}</text>
										      <text>&nbsp;</text>
										      <text class="fee">挂号费 ¥ {{ getYuan(item.fee) }}</text>
										    </view>
										</template>
									</uni-list-item>
								</uni-list>
							</view>
						</unicloud-db>
					</view>
					<!-- 科室列表结束 -->
				</view>
			</view>
		<!-- 主要内容结束 -->
	</view>
</template>

<script>
  export default {
    data() {
      return {
		  classify:["主页","儿科","内科","外科"],
		  current: 0,
		  indicatorDots: true,
		  autoplay: true,
		  interval: 2000,
		  duration: 500,
		  column: 3,
		  patientIcon: '/static/patient.jpg',
		  patientItem: [
		  	{text: '挂号', icon: '/static/guahao.jpg'},
		  	{text: '体检', icon: '/static/tijian.jpg'},
		  	{text: '购药', icon: '/static/gouyao.jpg'}
		  ],
      }
    },
	onLoad() {},
    methods: {
		load(data,ended){
			if(ended){
				this.formData.status = 'noMore'
			}
		},
		select() {
			this.formData.waterfall = !this.formData.waterfall;
		},
		getYuan(data){
		    let yuan = Math.floor(data / 100)
		    let fen = data % 100
		    if(fen < 10){
				if(fen == 0){
					fen = "0"
				}else{
					fen = '0' + fen
				}
			} 
		    return yuan+'.'+fen
		  },
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			goToGridPage(){
				uni.navigateTo({
					url:'/pages/grid/grid'
				})
			},
    },
	/**
	 * 下拉刷新回调函数
	 */
	onPullDownRefresh() {
		this.formData.status = 'more'
		this.$refs.udb.loadData({clear:true},()=>{
			this.tipShow = true
			clearTimeout(this.timer)
			this.timer = setTimeout(()=>{
				this.tipShow  = false
			},1000)
			uni.stopPullDownRefresh()
		})
	},
	/**
	 * 上拉加载回调函数
	 */
	onReachBottom() {
		this.$refs.udb.loadMore()
	},
  }
</script>
	
<style lang="scss">
	@import '../../common/uni-ui.scss';
	view {
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	}
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}
	.pages {
		background-color: #0000ff;
	}
	
	.header{
		display: flex;
		flex-direction: row;
		background-color: #FFFFFF;
	}
	
	.locationName{
		display: flex;
		flex-direction: row;
		height: 50px;
		line-height: 50px;
		font-size: 12px;
	}
	
	.uni-search-bar {
		background-color: #FFFFFF;
		height: 50px;
		width: 580rpx;
	}
	
		
	.classify_wrap{
		width: 750rpx;
		display: flex;
		flex-direction: row;
	}
	.classify_scroll_x{
		width: 650rpx;
		background-color: #FFFFFF;
		margin-top: 5rpx;
		margin-bottom: 8rpx;
		white-space: nowrap;
	}
	.segmented-wrap{
		width: 900rpx;
	}
	.uni-margin-wrap{
			margin-top: 5rpx;
		}
	.swiper{
		height: 315rpx;
	}
	.banner-image {
		width: 750rpx;
		height: 315rpx;
	}
	.classify_icon{
		display: flex;
		flex: 1;
		height: 90rpx;
		background-color: #ffffff;
		margin: 5rpx 8rpx 2rpx;
		line-height: 90rpx;
		text-align: center;
	}
	.grid-item-box{
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		font-size: 16px;
	}
	.slot-box {
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	}
	
	.slot-image {
	  display: block;
	  margin-right: 10px;
	  width: 200rpx;
	  height: 200rpx;
	}
	.doctorName{
	  font-size: 30rpx;
	  display: -webkit-box;
	  line-height: 1.5em;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  margin-bottom: 5rpx;
	}
	.doctorLevel{
	  font-size: 24rpx;
	  white-space: nowrap; /* 禁止换行 */
	  overflow: hidden; /* 隐藏溢出内容 */
	  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
	  word-break: break-all; /* 允许在单词内换行 */
	  margin-bottom: 10rpx;
	  color: #666666;
	}
	.fee {
	  display: flex;
	  flex-direction: row;
	  line-height: 40rpx;
	}
	
	.list {
		.uni-list--waterfall {

			/* #ifndef H5 || APP-VUE */
			/* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
			::v-deep .uni-list {
				/* #endif */
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 5px;
				box-sizing: border-box;

				/* #ifdef H5 || APP-VUE */
				 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
				::v-deep
				/* #endif */
				.uni-list-item--waterfall {
					width: 50%;
					box-sizing: border-box;

					.uni-list-item__container {
						padding: 5px;
						flex-direction: column;
					}
				}

				/* #ifndef H5 || APP-VUE */
			}

			/* #endif */
		}
	}
	.uni-list--waterfall {
		
		/* #ifndef H5 || APP-VUE */
		 /* 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下 */
		::v-deep .uni-list {
			/* #endif */
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 5px;
			box-sizing: border-box;
		
			/* #ifdef H5 || APP-VUE */
			 /* h5 和 app-vue 使用深度选择器，因为默认使用了 scoped ，所以样式会无法穿透 */
			::v-deep
			/* #endif */
			.uni-list-item--waterfall {
				width: 50%;
				box-sizing: border-box;
		
				.uni-list-item__container {
					padding: 5px;
					flex-direction: column;
				}
			}
		
			/* #ifndef H5 || APP-VUE */
		}
		
		/* #endif */
	}

</style>
